<template>
  <div>
    <!-- <h3>{{ state.count }}</h3> -->
    <h3>{{ state.nested.bar }}</h3>
    <button @click="addCount">+++++++</button>
  </div>
</template>

<script>
// 浅层响应式 shallowReactive  -- 优化
import { shallowReactive } from 'vue'

export default {
  setup() {
    const state = shallowReactive({
      count: 1,
      nested: {
        bar: 2
      }
    })

    const addCount = () => {
      // 更改状态自身的属性是响应式的
      // 响应式
      // state.count++

      // 更深层级，不是响应式
      state.nested.bar++
    }

    return {
      state,
      addCount
    }
  }
}
</script>

<style lang="scss"></style>
